<template>
  <div>
    <div class="mv" v-for="item in mvList" :key="item" @click="goMv(item.vid)">
      <img :src="item.coverUrl" alt="" />
      <div class="mvLeft">
        <div class="name">{{ item.title }}</div>
        <div class="user">{{ item.creator[0].userName }}</div>
        <div class="number">{{ changCount(item.durationms) }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import { getMvrelated } from "@/request/api/mv";
export default {
  data() {
    return {
      mvList: [],
    };
  },
  mounted() {
    getMvrelated(this.$store.state.mvid).then((res) => {
      console.log(res);
      this.mvList = res.data.data;
    });
  },
  methods: {
    goMv(res) {
      console.log(res);
      this.$store.commit("updataMvid", res);
      //页面跳转
      this.$router.push("/MusicMv");
    },
    //播放数据的处理
    changCount(num) {
      if (num > 100000000) {
        return (num / 10000000).toFixed(1) + "亿";
      } else if (num > 10000) {
        return (num / 10000).toFixed(1) + "万";
      }
    },
  },
};
</script>

<style lang="less">
.mv {
  display: flex;
  padding: 0.2rem;
  img {
    width: 3.5rem;
    height: 2.3rem;
    border-radius: 0.2rem;
    flex: 1;
  }
  .mvLeft {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 0 0.2rem;
    flex: 2;
    .name {
      font-weight: 700;
      padding: 5px 0;
      text-overflow: -o-ellipsis-lastline;
      overflow: hidden;
      text-overflow: ellipsis;
      -webkit-line-clamp: 2;
      display: -webkit-box;
      -webkit-box-orient: vertical;
    }
    .user {
      color: #999;
      padding: 5px 0;
    }
    .number {
      color: #999;
    }
  }
}
</style>
